<template>
  <n-card class="cardbg">
    <n-spin :show="val.show">
      <div style="margin-top: -15px">
        <n-scrollbar x-scrollable>
          <n-space justify="center" class="report_tab">
            <div
              style="
                display: flex;
                flex-flow: wrap;
                white-space: nowrap;
                gap: 8px 12px;
                padding-right: 12px;
                flex-direction: row;
                flex-wrap: nowrap;
              "
            >
              <n-select
                v-model:value="val.qs.season"
                :options="val?.sl"
                style="min-width: 11rem"
                @update:value="ct.upseason"
              />

              <n-select
                v-model:value="val.qs.sort"
                :options="val.level"
                style="min-width: 11rem"
                @update:value="ct.upsort"
              />

              <div style="padding-right: 1px"></div>
            </div>
          </n-space>
        </n-scrollbar>
      </div>

      <template v-if="val?.qs?.sog">
        <n-card>
          正在查看公会《{{ val.qs.sog }}》均伤排名 <br /><br />
          <n-button type="warning" @click="ct.upgname(null)">取消筛选公会</n-button>
        </n-card>
        <br />
      </template>
      <template v-else>
        <n-card class="cardbg">
          <p
            style="
              margin: 0;
              line-height: 20px;
              font-size: 12px;
              color: var(--base-font-color);
            "
          >
            - 不满3刀的数据不算（同日期、同等级） <br /><span
              style="color: var(--base-font-hover-color)"
            >
              - 符合 [{{ val.sf }}] 级参与人数共{{ val.uc }}人</span
            >
          </p>
        </n-card>
      </template>
      <n-spin :show="val.show2">
        <div>
          <n-pagination
            :page="Number(val.qs.page)"
            :on-update:page="ct.uppage"
            :page-count="val.data.count"
          />
          <br />

          <div class="top_div">
            <div v-if="val.data.count <= 0">
              <n-card class="cardbg">
                <n-empty description="找不到出刀本期数据，服务器未保存本期均伤数据，请查看其他赛季。"> </n-empty>
              </n-card>
            </div>
            <template v-for="item in val?.data?.data">
              <n-popover :disabled="val.cksub" trigger="click" raw :show-arrow="false">
                <template #trigger>
                  <div class="top_div-box">
                    <div class="top_raid-pa2"># {{ item.top }}</div>
                    <div>
                      <img
                        style="width: 40px; margin-right: 10px"
                        :src="$cfg.function.ava(item.zk)" 
                      />
                    </div>
                    <div>
                      <template v-if="val?.qs?.sog">
                        <p class="_p1">{{ item.un }}</p>
                        <p class="_p3">
                          (榜{{ item.top }}) {{ item.c }}天 -
                          {{ item.d?.toLocaleString() }}
                        </p>
                      </template>
                      <template v-else>
                        <p class="_p2">{{ item.un }}</p>
                        <p class="_p2">{{ item.g }}</p>
                        <p class="_p3">({{ item.c }}天) {{ item.d?.toLocaleString() }}</p>
                      </template>
                    </div>
                  </div>
                </template>
                <div class="gc-hover">
                  <n-space>
                    <n-button type="warning" size="small" @click="ct.upgname(`${item.g}`)"
                      >筛选该公会</n-button
                    >
                  </n-space>
                </div>
              </n-popover>
            </template>
          </div>
          <br />
          <n-pagination
            :page="Number(val.qs.page)"
            :on-update:page="ct.uppage"
            :page-count="val.data.count"
          />
          <br />
        </div>
      </n-spin>
    </n-spin>
  </n-card>
</template>

<script>
import axios from "axios";

export default defineComponent({
  mounted() {
    this.$router.push({
      query: {
        ...this.$route.query,
        ...this.val.qs,
      },
    });

    this.ct.get_season();
  },
  data() {
    let val = reactive({
      cksub: false,
      show: true,
      show2: false,
      sl: [
        {
          value: "new",
          label: `加载中 `,
        },
      ],
      data: {
        data: [],
        count: 0,
      },
      level: [
      ],
      gc: 0,
      uc: 0,
      sf: 0,
      dc: 0,
      season: 0,
      mr: 0,
      gid: "Loading",
      type: null,
      cache_page: this.$route.query?.page ?? 1,
      qs: {
        limit: this.$route.query?.limit ?? 32,
        cks: this.$route.query?.cks ?? "all",
        sort: isNaN(this.$route.query?.sort)
          ? this.$route.query?.sort ?? "max"
          : parseInt(this.$route.query?.sort),
        page: this.$route.query?.page ?? 1,
        season: isNaN(this.$route.query?.season)
          ? this.$route.query?.season ?? "new"
          : parseInt(this.$route.query?.season),
        sog: this.$route.query?.sog ?? null,
      },
    });
    let ct = {};

    ct.upseason = (sid) => {
      let newqs = {
        ...this.val.qs,
      };
      newqs.season = sid;
      newqs.page = 1;
      val.qs = newqs;
      this.$router.push({
        query: {
          ...this.$route.query,
          ...newqs,
        },
      });
    };

    ct.uppage = (page) => {
      val.cache_page = page;
      let newqs = {
        ...this.val.qs,
      };
      newqs.page = page;
      val.qs = newqs;
      this.$router.push({
        query: {
          ...this.$route.query,
          ...newqs,
        },
      });
    };

    ct.get_season = async () => {
      axios
        .get(`${this.$cfg.url}`, {
          params: {
            t: "get/player/ls_season_list",
            type: "dx",
          },
        })
        .then((response) => {
          const data = response.data;
          data?.forEach((data2, key2) => {
            val.sl.push({
              value: parseInt(data2.season),
              label: `往期：赛季 ${data2.season}`,
            });
          });

          console.log(val.sl);
        })
        .catch((error) => {});
    };

    ct.upsort = (sort) => {
      let newqs = {
        ...this.val.qs,
      };
      newqs.sort = sort;
      val.qs = newqs;
      this.$router.push({
        query: {
          ...this.$route.query,
          ...newqs,
        },
      });
    };

    ct.upgname = (gname) => {
      val.cksub = true;
      setTimeout(() => {
        val.cksub = false;
      }, 100);
      let newqs = {
        ...this.val.qs,
      };

      if (gname == null) {
        newqs.sog = null;
        newqs.page = val.cache_page;
      } else {
        newqs.sog = gname;
        newqs.page = 1;
      }
      val.qs = newqs;
      this.$router.push({
        query: {
          ...this.$route.query,
          ...newqs,
        },
      });
    };

    ct.upd = () => {
      val.show2 = true;
      axios
        .get(`${this.$cfg.url}`, {
          params: {
            t: "get/auto/gf_avg",
            ...val.qs,
          },
        })
        .then((response) => {
          const data = response.data;
          val.data.count = data.limit;
          val.data.data = data.data;
          val.gc = data.guild_count;
          val.uc = data.userlimit;
          val.dc = data.count;
          val.mr = data.maxrd;
          val.sf = data.sort;
          val.gid = data.mgid;
          val.season = data.season;
          val.type = data.type;
          val.level = [
          ];

          data?.lv?.forEach((data2, key2) => {
            val.level.push({
              value: data2,
              label: `等级 ${data2} 均伤排名`,
            });
          });

          val.show = false;
          val.show2 = false;
        })
        .catch((error) => {});
    };
    return {
      ct,
      val,
    };
  },
  watch: {
    "val.qs": {
      handler(newVal) {
        this.ct.upd();
      },
      deep: true,
      immediate: true,
    },
  },
});
</script>
